#tags-column.sn-component.section.tags(aria-label='Tags')
  .component-view-container(ng-if='self.component.active')
    component-view.component-view(
      component-uuid='self.component.uuid',
      application='self.application'
      )
  #tags-content.content(ng-if='!(self.component && self.component.active)')
    .tags-title-section.section-title-bar
      .section-title-bar-header
        .sk-h3.title
          span.sk-bold Views
        .sk-button.sk-secondary-contrast.wide(
          ng-click='self.clickedAddNewTag()',
          title='Create a new tag'
          )
          .sk-label
            i.icon.ion-plus.add-button
    .scrollable
      .infinite-scroll
        .tag(
          ng-class="{'selected' : self.state.selectedTag == tag, 'faded' : !tag.isAllTag}",
          ng-click='self.selectTag(tag)',
          ng-repeat='tag in self.state.smartTags track by tag.uuid'
          )
          .tag-info
            .title(ng-if="!tag.errorDecrypting") {{tag.title}}
            .count(ng-show='tag.isAllTag') {{self.state.noteCounts[tag.uuid]}}
          .danger.small-text.font-bold(ng-show='tag.conflictOf') Conflicted Copy
          .danger.small-text.font-bold(ng-show='tag.errorDecrypting && !tag.waitingForKey') Missing Keys
          .info.small-text.font-bold(ng-show='tag.errorDecrypting && tag.waitingForKey') Waiting For Keys
        .tags-title-section.section-title-bar
          .section-title-bar-header
            .sk-h3.title
              span.sk-bold Tags
        .tag(
          ng-class="{'selected' : self.state.selectedTag == tag}",
          ng-click='self.selectTag(tag)',
          ng-repeat='tag in self.state.tags track by tag.uuid'
          )
          .tag-info(ng-if="!tag.errorDecrypting")
            .tag-icon #
            input.title(
              ng-attr-id='tag-{{tag.uuid}}',
              ng-blur='self.saveTag($event, tag)'
              ng-change='self.onTagTitleChange(tag)',
              ng-model='self.titles[tag.uuid]',
              ng-class="{'editing' : self.state.editingTag == tag}",
              ng-click='self.selectTag(tag)',
              ng-keyup='$event.keyCode == 13 && $event.target.blur()',
              should-focus='self.state.templateTag || self.state.editingTag == tag',
              sn-autofocus='true',
              spellcheck='false'
              )
            .count {{self.state.noteCounts[tag.uuid]}}
          .danger.small-text.font-bold(ng-show='tag.conflictOf') Conflicted Copy
          .danger.small-text.font-bold(ng-show='tag.errorDecrypting && !tag.waitingForKey') Missing Keys
          .info.small-text.font-bold(ng-show='tag.errorDecrypting && tag.waitingForKey') Waiting For Keys
          .menu(ng-show='self.state.selectedTag == tag')
            a.item(ng-click='self.selectedRenameTag(tag)' ng-show='!self.state.editingTag') Rename
            a.item(ng-click='self.saveTag($event, tag)' ng-show='self.state.editingTag') Save
            a.item(ng-click='self.selectedDeleteTag(tag)') Delete
        .no-tags-placeholder(ng-show='self.state.tags.length == 0')
          | No tags. Create one using the add button above.
  panel-resizer(
    collapsable='true',
    control='self.panelPuppet',
    default-width='150',
    hoverable='true',
    on-resize-finish='self.onPanelResize',
    panel-id="'tags-column'"
    )
